 <link href='http://nevermore-blog.googlecode.com/svn/blog/404.css' rel='stylesheet' type='text/css'/>

 <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
  <style type='text/css'>
#myTa {
  border:1px solid black;
  padding:5px;
  width:100%;
  height:200px;
  margin:10px auto;    
}

button {padding:5px 10px;}
#a{color:blue}
#bold      {font-weight:bold;           }
#italic    {font-style:italic;          }
#underline {text-decoration:underline;  }
#code      {color:blue;font-weight:bold;}

  </style>
<script type='text/javascript'>//<![CDATA[ 
$(function(){
function wrapText(elementID, openTag, closeTag) {
    var textArea = $('#' + elementID);
    var len = textArea.val().length;
    var start = textArea[0].selectionStart;
    var end = textArea[0].selectionEnd;
    var selectedText = textArea.val().substring(start, end);
    var replacement = openTag + selectedText + closeTag;
    textArea.val(textArea.val().substring(0, start) + replacement + textArea.val().substring(end, len));
}
$('#p').click(function() {
    wrapText("myTa", "<p>", "</p>");
});
$('#img').click(function() {
    wrapText("myTa", "<img src='", "' alt=''></img>");
});
$('#center').click(function() {
    wrapText("myTa", "<div class='center'>", "</div>");
});
$('#demo').click(function() {
    wrapText("myTa", "<a href='", "' class='btn'>Demo</a>");
});
$('#a').click(function() {
    wrapText("myTa", "<a href=''>", "</a>");
});
$('#bold').click(function() {
    wrapText("myTa", "<strong>", "</strong>");
});
$('#italic').click(function() {
    wrapText("myTa", "<div class='catatan'>", "</div>");
});
$('#underline').click(function() {
    wrapText("myTa", "<u>", "</u>");
});
$('#code').click(function() {
    wrapText("myTa", "<pre><code>", "</code></pre>");
});

});

$(function() {$('body').append('<div id="container"></div>');
$('button').click(function() {
var value = $('#myTa').val();
$('#container').html(value );
});
});
//]]>  

</script>
  <textarea id="myTa">Silahkan</textarea>

<button id="bold">B</button>
<button id="italic">note</button>
<button id="underline">U</button>
<button id="code">{}</button>
<button id="a">A</button>
<button id="demo">Btn</button>
<button id="center">center</button>
<button id="img">img</button>
<button id="p">P</button>
